<template>
<!-- 交易指数共用折线图组件 -->
  <div class="live_chart">
    <div ref="chart03" class="chart_box"></div>
  </div>
</template>

<script>
let mychart = null
import testIcon1 from '@/assets/two/goodss.png'
export default {
  name: 'liveLine',
  components: {},
  props: {
    xData1: Array | Object,
    series1: Array | Object,
    series2: Array | Object,
    series3: Array | Object,
    name1: String,
    name2: String,
    name3: String,
  },
  data() {
    return {
      series:[],
      grid:{},
    }
  },
  computed: {},
  watch: {
    series1: {
      handler(n, o) {
        if(n){
          this.series.unshift({
            name: this.name1,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbol: 'none', //去掉折线上的小圆点
            data: n,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#ff7500',
                      },
                      {
                        offset: 1,
                        color: '#fff',
                      },
                    ]
                  ),
                },
                color: '#ff7500',
                //柱子颜色
              },
            },
          });
          this.grid.left = "56";
        }else{
          this.series.splice(0,1);
          if(!this.series2){
            this.grid.left = "20";
          }
        }
        this.drawLiveLine();
      },
      deep: true,
    },
    series2: {
      handler(n, o) {
        let startIndex;
        if(this.series.length == 2){
          startIndex = 1;
        }else{
          if(this.series[0] && (this.series[0].name == this.name1)){  //只选中了实时在线人数
            startIndex = 1;
          }else{  //只选中了离场人数
            startIndex = 0;
          }
        }
        if(n){
          this.series.splice(startIndex,0,{
            name: this.name2,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbol: 'none', //去掉折线上的小圆点
            data: n,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#1779ff',
                      },
                      {
                        offset: 1,
                        color: '#fff',
                      },
                    ]
                  ),
                },
                color: '#1779ff',
                //柱子颜色
              },
            },
          });
          this.grid.left = "56";
        }else{
          let idx = 0;
          this.series.forEach((item,i)=>{
            if(item.name == this.name2){
              idx = i;
            }
          });
          if(!this.series1){
            this.grid.left = "20";
          }
          this.series.splice(idx,1);
        }
        this.drawLiveLine();
      },
      deep: true,
    },
    series3: {
      handler(n, o) {
        if(n){
          this.series.push({
            name: this.name3,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbol: 'none', //去掉折线上的小圆点
            data: n,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ec0cc',
                      },
                      {
                        offset: 1,
                        color: '#fff',
                      },
                    ]
                  ),
                },
                color: '#3ec0cc',
                //柱子颜色
              },
            },
          });
          this.grid.right = "50";
        }else{
          this.series.splice(this.series.length-1,1);
          this.grid.right = "20";
        }
        this.drawLiveLine();
      },
      deep: true,
    },
    // name2: {
    //   handler(newVal) {
    //     console.log(newVal)
    //     this.drawLiveLine()
    //   },
    //   deep: true,
    // },
  },

  created() {
  },
  mounted() {
    // if (this.xData1) {
    //   this.$nextTick(() => {
    //     this.drawLiveLine()
    //   })
    // }
  },

  methods: {
    drawLiveLine() {
      let that = this;
      let mychart = null;
      mychart = that.$echarts.init(that.$refs.chart03);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#e5e5e5',
            },
          },
          extraCssText: 'z-index: 9', //设置消息提示框的层级
          formatter: function (params) {
            let result01 = ''
            params.forEach(function (item) {
              result01 +=
                item.marker +
                ' ' +
                item.seriesName +
                ' : ' +
                that.format_num(item.value) +
                '</br>'
            })
            return params[0].name + '</br>' + result01
          },
        },
        legend: {
          icon: 'rect ',
          top: 20,
          itemWidth: 20,
          itemHeight: 3,
          itemGap: 30,
          textStyle: {
            color: '#555',
          },
          selectedMode:false,
        },
        grid: {
          // left: '56',
          // right: '58',
          ...this.grid,
          bottom: '60',
          containLabel: false,
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData1,
            boundaryGap: false, //X轴起始位置靠着Y轴
            //设置网格线颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed',
              },
            },
            // x轴样式
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#e5e5e5', //左边线的颜色
                width: '1', //坐标线的宽度
              },
            },
            axisTick: {
              show: false,
            },
            // x轴字体样式
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              margin: 4,
              show: true,
              textStyle: {
                color: '#888',
                // fontFamily: "DINAlternate-Bold",
                fontSize: 10,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            // name: this.name1,
            //设置网格线颜色
            nameTextStyle: {
              color: '#888',
              padding: [0, 0, 0, 45],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#888',
                fontSize: 12,
              },
              formatter: function (value) {
                return that.format_num(value)
              },
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#e5e5e5', //左边线的颜色
                width: '1', //坐标线的宽度
              },
            },
          },
          {
            type: 'value',
            // name: this.name2,
            //设置网格线颜色
            nameTextStyle: {
              color: '#888',
              padding: [0, 0, 0, -55],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#888',
                fontSize: 10,
              },
              formatter: function (value) {
                return that.format_num(value)
              },
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#e5e5e5', //右边坐标轴线的颜色
                width: '1', //坐标线的宽度
              },
            },
          },
        ],
        dataZoom: [
          {
            // type: 'slider',
            // realtime: true,
            // start: 0,
            // end: 100,
            // fillerColor: '#f0935e',
            // height: '26',
            type: 'slider',
            show: true,
            height: 22,
            // bottom: 0,
            realtime: true,
            borderColor: 'transparent',
            // backgroundColor: '#f0935e',
            fillerColor: '#f0935e',
            // 拖拽手柄样式 svg 路径
            // handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
            handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z',
            handleColor: '#fff',
            handleSize: 17,
            handleStyle: {
              color:"#294b97",
              borderColor:'rgba(240, 147, 94, 0.4)',
              borderSize:1,
              shadowBlur: 5,
              shadowColor: 'rgba(240, 147, 94, 0.8)',
              shadowOffsetX: 0, // 阴影偏移x轴多少
              shadowOffsetY: 0 // 阴影偏移y轴多少
            },
            start: 0,
            end: 100,
            textStyle:false,
            // textStyle:{
            //   color:'#f0935e',
            // }
          },
        ],
        series: this.series,
      }

     mychart.setOption(option, true) //true,每次调用都重新渲
      //   窗口自适应
      setTimeout(() => {
        window.addEventListener('resize', function () {
          mychart.resize()
        })
      }, 200);
    },
    beforeDestroy() {
      mychart.dispose()
      mychart = null
    },
  },
}
</script>
<style lang='less' scoped>
.live_chart {
  width: 100%;
  height: calc(100% - 0.5333rem);
  // margin-top: 0.5333rem;
  // height: 100%;
  // height: 0.5333rem;
  // margin-top: 36px;
  .chart_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>